<template>
    <el-dialog class="ba-operate-dialog" :close-on-click-modal="false" :model-value="isShow" @close="close" width="50%">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">绑定设备</div>
        </template>
        <div class="qrcode-container" style="display: flex; justify-content: center; align-items: center; height: 80%">
            <qrcode-vue :value="value" :level="level" :size="400" :render-as="renderAs"></qrcode-vue>
        </div>
        <div>
            <code class="value-string">
                {{ value }}
            </code>
            <br />
            <el-button @click="copy"> 复制 </el-button>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject, reactive, ref } from 'vue'
import QrcodeVue, { Level, RenderAs } from 'qrcode.vue'
import baTableClass from '/@/utils/baTable'
import app from '/@/lang/backend/en/app'
import { ElMessage } from 'element-plus'
let isShow = ref(false)
const value = ref('qrcode')
const level = ref<Level>('L')
const renderAs = ref<RenderAs>('svg')
const baTable = inject('baTable') as baTableClass

function close() {
    isShow.value = false
}
function show(teamId: number) {
    let host = import.meta.env.VITE_AXIOS_BASE_URL === 'getCurrentDomain' ? window.location.origin : import.meta.env.VITE_AXIOS_BASE_URL

    value.value = JSON.stringify({
        host: host,
        appsecret: baTable.form.items!.appsecret,
        deviceId: baTable.form.items!.id,
    })

    console.log(value.value)
    isShow.value = true
}
function copy() {
    navigator.clipboard
        .writeText(value.value)
        .then(() => {
            ElMessage.success('复制成功')
        })
        .catch(() => {
            ElMessage.error('复制失败')
        })
}
defineExpose({
    show,
})
</script>
<style scoped>
.value-string {
    color: cadetblue;
}
</style>
